<template>
	<view class="container">
		<u-navbar title="我的订单" :autoBack="true" :isBack="false" back-icon-color="#333333" title-color="#333" :border-bottom="false"></u-navbar>
		<view class="_content" :style="{ position: 'absolute', top: sHeight }">
			<z-paging-swiper>
				<template v-slot:top>
					<view :style="{ 'margin-top' : sHeight }"/>
					<view class="header">
						<!-- <u-tabs
							active-color="#333333"
							inactive-color="#999999"
							:active-item-style="{ fontWeight: 'bold' }"
							:bar-style="{backgroundColor:'#0EC7D9'}"
							height="90"
							:list="tabList"
							:is-scroll="false"
							@change="tabsChange"
							v-model="current"
						></u-tabs> -->
						<z-tabs 
							ref="tabs" 
							:list="tabList" 
							:current="current" 
							@change="tabsChange" 
							bottom-space="0rpx"
							:tabs-style="{
								backgroundColor:'#fff',
								marginBottom: '17rpx',
							}"
							:active-style="{
								fontWeight: 'bold !important'
							}"
						/>
					</view>
				</template>
				<swiper class="swiper" :current="current" @animationfinish="animationfinish" @transition="swiperTransition">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<swiper-list-item ref="swiperList" :tabIndex="index" :currentIndex="current"></swiper-list-item>
					</swiper-item>
				</swiper>
			</z-paging-swiper>
		</view>
	</view>
</template>

<script setup>
	import swiperListItem from './components/swiper-list-item.vue';
	import { getCurrentInstance, reactive, ref } from 'vue';
	import { onReady, onShow, onLoad, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	const { proxy } = getCurrentInstance();
	
	let sHeight = ref(0);
	let tabList = ref([
		{name: '全部', val:[] },
		{name: '待付首款', val:['1'] },
		{name: '设计中', val:['3', '4', '5'] },
		{name: '待付尾款', val:['6'] },
		{name: '已完成', val:['7'] },
	]);
	let current = ref(0);
	
	
	
	// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(()=>{
			return {
				title: '设计很忙',
				// path: '/pagesA/washBeauty/MaintenanceDetail?id=' + this.options.id + '&back=' + 1 + '&storeId=' + this.options.storeId,
				// query: `id=${this.options.id}&storeId=${this.options.storeId}&back=1`,
				// imageUrl: this.Detail.goodsLogo
			};
		
	})
	// 自定义页面的分享到朋友圈
	onShareTimeline(()=>{
		return {
			title: '设计很忙',
			// query: `id=${this.options.id}&title=${this.options.title}&status=${this.options.status}&currentTimeFlag=${this.options.currentTimeFlag}&back=1`,
			// imageUrl: this.list[0]
		};
	})
	
	
	
	
	onShow(()=>{
		proxy.$refs.swiperList[current.value].$refs.paging.reload()
	})
	onLoad((opt) => {
		console.log(opt);
		getStatusHeight();
		uni.$on('paySuccess', data => {
			proxy.$refs.swiperList[current.value].$refs.paging.reload()
			setTimeout(()=>{
				proxy.tui.toast(data ? '提交成功，请等待平台审核' : '支付成功')
			}, 1000)
		});
	});
	onUnload(()=>{
		uni.$off("paySuccess")
	})
	
	// 计算距离顶部安全高度
	function getStatusHeight() {
		sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	}
	
	function swiperTransition(e){
		proxy.$refs.tabs.setDx(e.detail.dx);
	}
	
	// swiper
	function tabsChange(item) {
		current.value = item;
		console.log(current.value);
	}
	
	//swiper滑动结束
	function animationfinish(e) {
		current.value = e.detail.current;
		proxy.$refs.tabs.unlockDx();
	}
</script>

<style lang="scss">
	::v-deep .z-tabs-item-title{
		font-size: 28rpx !important;
		font-weight: 500 !important;
		line-height: 40rpx !important;
	}
	::v-deep .z-tabs-bottom-dot{
		border-radius: 0 !important;
	}
page {
	background-color: #f5f5f5;
}
.container {
	width: 100%;
	height: 100%;
	._content {
		width: 100%;
		.swiper {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
